<template>
	<view class="competition-page">
		<view class="select-area-sty">
			<view style="flex:2;text-align: left;margin-left: 30rpx;">
				<input class="select-input" type="text" placeholder="学员姓名" v-model="stdNm">
			</view>
			<view class="search-btn" @click="searchFn">查询</view>
			<!-- 			<view style="flex:1;text-align: center;">
				级别
				<uni-data-select v-model="lv" :localdata="level" @change="changeLevel"></uni-data-select>
			</view> -->
		</view>
		<view style="padding: 20rpx;">
			<view v-for="item in studentList" :key="item._id" class="news-area" @click="toNewsDetail(item)">
				<view style="width: 100px;height: 150px;display: inline-block;vertical-align: top;"><img
						style="width: 98px;height: 137px;" :src="item.imgUrl" alt=""></view>
				<view style="display: inline-block;margin-left: 20rpx;position: relative;width: 68%;height: 62px;">
					<view class="student-info">姓名：{{item.stdNm}}</view>
					<view class="student-info">年龄：{{item.age||''}}</view>
					<view class="student-info">身高：{{item.height||''}}</view>
					<view class="student-info">体重：{{item.weight||''}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataFn
	} from '@/utils/baseFn.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				studentList: [],
				where: `"deleted_at"==null`,
				tmpWhere: {
					deleted_at: null,
				},
				level: [{
						value: '0',
						text: '初级'
					},
					{
						value: '1',
						text: '中级'
					},
					{
						value: '2',
						text: '高级'
					}
				],
				stdNm: '',
				lv: '',
				skipNum: 0
			}
		},
		props: {},
		onLoad() {},
		created() {},
		mounted() {},
		methods: {
			getStudentList() {
				getDataFn('student-MGMT', this.where, this.skipNum, 'portrait,stdNm,age,height,weight').then(
					res => {
						const arr = []
						res.data.map(item => {
							const file = item.portrait.split(',')
							item.imgUrl = `${this.$baseImgUrl}${file[0]}`
							arr.push(item)
						})
						this.studentList = this.studentList.concat(arr)
						this.skipNum = this.studentList.length
					})
			},
			initData() {
				this.studentList = []
				this.skipNum = 0
				this.getStudentList()
			},
			toNewsDetail(item) {
				uni.navigateTo({
					url: `studentDetail?parm=${JSON.stringify(item)}`
				});
			},
			searchFn() {
				let str = {
					...this.tmpWhere
				}
				if (this.stdNm) {
					str.stdNm = new RegExp(this.stdNm)
				}
				this.where = str
				this.initData()
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// this.skipNum = this.skipNum + 20
			this.getStudentList()
		}
	}
</script>

<style>
	.competition-page {}

	.select-input {
		width: 80%;
		display: inline-block;
		vertical-align: middle;
		margin-left: 10px;
	}

	.search-btn {
		width: 80px;
		border: 1px solid #fc993b;
		text-align: center;
		background: #fc993b;
		color: #fff;
	}

	.select-area-sty {
		height: 55px;
		display: flex;
		background-color: #fff;
		line-height: 50px;
		border: 1px solid #fc993b;
		border-radius: 5px;
		margin-left: 10px;
	}

	/* 	.competition-page .uni-date {
		width: 135px;
		display: inline-block;
	} */

	.competition-page .uni-select,
	.competition-page .uni-date-x--border {
		border: none;
		border-bottom: none;
	}

	.competition-page .uni-stat__select {
		width: 120px;
		display: inline-block;
	}

	.news-area {
		margin: 30px 0;
		padding: 10px;
		box-shadow: 2px 6px 8px 1px #ccc;
	}

	.state-sty {
		width: 75px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		border-radius: 2px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
	}

	.student-info {
		font-size: 30rpx;
		font-family: 600;
		/* display: inline-block; */
		width: 50%;
		height: 36px;
	}
</style>
<style lang="scss">
</style>